<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Nunito+Sans" rel="stylesheet">

    <title>{%PRODUCTNAME%} /// The Laptop Store!</title>

    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: inherit;
        }

        html {
            font-size: 62.5%;
            box-sizing: border-box;
        }

        body {
            padding: 6rem 4rem 10rem;
            line-height: 1.7;
            font-family: "Nunito Sans", sans-serif;
            color: #555;
            min-height: 100vh;
            background: linear-gradient(to bottom right, #67b26f, #4ca2cd);
        }

        h1 {
            font-family: "Bungee Inline", sans-serif;
            font-weight: 400;
            font-size: 6rem;
            color: white;
            transform: skewY(-5deg);
            margin-bottom: 6rem;
            text-align: center;
            position: relative;
            word-spacing: 3px;
        }

        h1::before {
            content: '';
            display: block;
            height: 65%;
            width: 58%;
            position: absolute;
            top: 105%;
            left: 50%;
            background: linear-gradient(to bottom, #67b26f, #4ca2cd);
            opacity: .8;
            z-index: -1;
            transform: skewY(370deg) translate(-50%, -50%);
        }

        .container {
            width: 110rem;
            margin: 0 auto;
        }

        .laptop {
            width: 70rem;
            margin: 0 auto;
            background: white;
            box-shadow: 0 3rem 6rem 1rem rgba(0, 0, 0, 0.25);
            position: relative;
        }

        .laptop__hero {
            position: relative;
        }

        .laptop__hero::before {
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-image: linear-gradient(to right bottom, #67b26f, #4ca2cd);
            opacity: .4;
        }

        .laptop__img {
            width: 100%;
            display: block;
        }

        .laptop__price {
            position: absolute;
            top: -3rem;
            right: -3rem;
            z-index: 100;
            background: linear-gradient(to right bottom, #67b26f, #4ca2cd);
            height: 14rem;
            width: 14rem;
            border: 6px solid white;
            border-radius: 50%;
            transform: rotate(15deg);
            box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
            color: white;
            font-size: 3rem;
            font-family: "Bungee Inline", sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .laptop__back:link,
        .laptop__back:visited {
            position: absolute;
            top: 2rem;
            left: 2rem;
            font-size: 1.5rem;
            color: white;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            z-index: 1;
            border: 2px solid white;
            border-radius: 100rem;
            padding: 0 2rem;
            transition: all .3s;
            display: flex;
            align-items: center;
        }

        .laptop__back:hover,
        .laptop__back:active {
            background-color: white;
            color: #555;
        }

        .laptop__name {
            background: linear-gradient(to right, #67b26f, #4ca2cd);
            padding: 1.75rem 1rem;
            font-family: "Bungee Inline", sans-serif;
            font-weight: 400;
            font-size: 3.25rem;
            color: white;
            text-align: center;
            word-spacing: 2px;
        }

        .laptop__details {
            background-color: #eee;
            padding: 4rem 6rem;
            font-size: 1.5rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 1.75rem;
        }

        .laptop__description {
            padding: 5rem 6rem;
            font-size: 1.6rem;
            line-height: 1.8;
        }

        .laptop__link:link,
        .laptop__link:visited {
            display: block;
            background-color: #5aaa9d;
            color: white;
            font-size: 1.6rem;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            padding: 1.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s;
        }

        .laptop__link:hover,
        .laptop__link:active {
            background-color: #67b26f;
        }

        .laptop__source {
            padding: 0 6rem 3rem;
            color: #999;
            font-size: 1.2rem;
        }

        .laptop__source a:link,
        .laptop__source a:visited {
            color: #999;
        }

        .laptop__source a:hover,
        .laptop__source a:active {
            color: #555;
        }

        .emoji-left {
            font-size: 2rem;
            margin-right: 1rem;
        }

        .emoji-right {
            font-size: 2rem;
            margin-left: 1rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>The Laptop Store!</h1>
        <figure class="laptop">
            <p class="laptop__price">${%PRICE%}</p>
            <a href="/products" class="laptop__back"><span class="emoji-left">👈</span>Back</a>
            <div class="laptop__hero">
                <img src="/{%IMAGE%}" alt="{%PRODUCTNAME%}" class="laptop__img">
            </div>
            <h2 class="laptop__name">{%PRODUCTNAME%}</h2>
            <div class="laptop__details">
                <p><span class="emoji-left">🖥</span> {%SCREEN%}</p>
                <p><span class="emoji-left">🧮</span> {%CPU%}</p>
                <p><span class="emoji-left">💾</span> {%STORAGE%}</p>
                <p><span class="emoji-left">📦</span> {%RAM%}</p>
            </div>
            <p class="laptop__description">{%DESCRIPTION%}</p>
            <p class="laptop__source">Source: <a href="https://www.techradar.com/news/mobile-computing/laptops/best-laptops-1304361"
                    target="_blank">https://www.techradar.com/news/mobile-computing/laptops/best-laptops-1304361</a></p>
            <a href="#" class="laptop__link">Buy now for ${%PRICE%} <span class="emoji-right">🥳 😍</span></a>
        </figure>
    </div>
</body>

</html>